<template>
    <div class="employment_right">
        <!-- 右上角流向城市 -->
        <div class="trend_box">
            <div class="distribution_title">
                <div>毕业生流向城市</div>
            </div>
            <div class="trend_city">
                <div class="speciality_box">
                    <div :class="activeBox === 'box1' ? 'active' : ''" @click="selectBox('box1')">
                        <img :src="design" alt="">
                        <span>设计</span>
                    </div>
                    <div :class="activeBox === 'box2' ? 'active' : ''" @click="selectBox('box2')">
                        <img :src="develop" alt="">
                        <span>开发</span>
                    </div>
                    <div :class="activeBox === 'box3' ? 'active' : ''" @click="selectBox('box3')">
                        <img :src="metaverse" alt="">
                        <span>元宇宙</span>
                    </div>
                </div>
                <div class="distribution_chart" ref="distribution_chart"></div>
            </div>
        </div>
        <!-- 右下角薪资分布 -->
        <div class="salary_box">
            <div class="distribution_title">
                <div>毕业生薪资分布</div>
            </div>
            <div class="salary_chart" ref="salary_chart"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import './right.css'
import { getTrend, getSalary } from '../../../api';
import design from '../../../assets/images/设计.png'
import develop from '../../../assets/images/开发.png'
import metaverse from '../../../assets/images/元宇宙.png'

const trenddata = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        top: '10%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['北京', '上海', '浙江', '广东', '江苏', '重庆'],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#FFFFFF'
        }
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 14970, 31744, 30230],
            barWidth: '20%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#00CCD2' }, // 0% 处的颜色
                        { offset: 1, color: '#00A2FF' }  // 100% 处的颜色
                    ],
                    global: false
                }
            }
        }
    ]
})
const trenddata2 = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        top: '12%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['北京', '上海', '浙江', '广东'],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#FFFFFF'
        }
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [2389, 2903, 1970, 3230],
            barWidth: '20%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#00CCD2' }, // 0% 处的颜色
                        { offset: 1, color: '#00A2FF' }  // 100% 处的颜色
                    ],
                    global: false
                }
            }
        }
    ]
})
const trenddata3 = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['北京', '上海', '广东'],
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#FFFFFF'
        }
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [1203, 1970, 1744],
            barWidth: '20%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#00CCD2' }, // 0% 处的颜色
                        { offset: 1, color: '#00A2FF' }  // 100% 处的颜色
                    ],
                    global: false
                }
            }
        }
    ]
})
const salarydata = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}%'
    },
    legend: {
        icon: 'circle',
        data: ['10k~15k', '10k及以下', '15k~20k', '20k~30k', '30k+'],
        textStyle: {
            color: '#ffffff'
        }
    },
    series: [
        {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside',
                color: '#ffffff'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: 'none',
                borderWidth: 0
            },
            emphasis: {
                label: {
                    fontSize: 20,
                }
            },
            data: [
                { value: 60, name: '15k~20k' },
                { value: 40, name: '20k~30k' },
                { value: 20, name: '30k+' },
                { value: 80, name: '10k及以下' },
                { value: 100, name: '10k~15k' }
            ]
        }
    ]
})
const distribution_chart = ref(null);
const salary_chart = ref(null);
const activeBox = ref('box1');

const TrendData = async () => {
    try {
        let res = await getTrend();
        // console.log(res);    
        const mydistribution_chart = echarts.init(distribution_chart.value);
        if (activeBox.value === 'box1') {
            mydistribution_chart.setOption(trenddata.value);
        } else if (activeBox.value === 'box2') {
            mydistribution_chart.setOption(trenddata2.value);
        } else if (activeBox.value === 'box3') {
            mydistribution_chart.setOption(trenddata3.value);
        }
    } catch (error) {
        console.error('获取流向城市数据时出错:', error);
    }
}

const SalaryData = async () => {
    try {
        let res = await getSalary();
        // console.log(res);
        const mysalary_chart = echarts.init(salary_chart.value);
        mysalary_chart.setOption(salarydata.value);
    } catch (error) {
        console.error('获取毕业生薪资分布数据时出错:', error);
    }
}

function selectBox(boxId) {
    activeBox.value = boxId;
    TrendData();
}

onMounted(() => {
    TrendData();
    SalaryData();

    window.addEventListener('resize', () => {
        if (distribution_chart.value) echarts.getInstanceByDom(distribution_chart.value).resize();
        if (salary_chart.value) echarts.getInstanceByDom(salary_chart.value).resize();
    })
})

</script>

<style></style>